<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar :fixed='true' @clickLeft='handleBack' height="65px" color="#fff" backgroundColor="#00aaff">
				<template #left>
					<view class="u-nav-slot">
						<up-icon name="arrow-left" color="#fff" size="16"></up-icon>
						<up-text class="u-nav-text" text="车辆编制审核" color="#fff"></up-text>
					</view>

				</template>
				

			</uni-nav-bar>
		</view>
		
		<view>

			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in indexList" :key="item.id" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>

							<view class="car-list">
								<view class="car-list-item">
									<!-- 名字电话flex横向布局 -->
									<view class="car-list-item-row">
										<view class="car-list-item-row-name">
											省委办公厅
										</view>
										<view class="car-list-item-row-phone">
											<text>2019-09-02</text>
											<text v-if="index % 3 == 0" class="car-list-item-row-phone-status1">未审核</text>
											<text v-else-if="index % 3 == 1" class="car-list-item-row-phone-status2">通过</text>
											<text v-else class="car-list-item-row-phone-status3">不通过</text>
										</view>
									</view>

									<view class="car-list-item-content-title">
										<text>车辆编制：<text class="car-list-item-content-title-num">28</text></text>
										<text>现有车辆：<text class="car-list-item-content-title-num">28</text></text>
									</view>

									<view class="car-list-item-content-tags">


										<view class="car-list-item-content-tags-item" v-for="(item,index) in 3"
											:key="index">
											<text>行政单位</text>
										</view>
									</view>

								</view>
							</view>

						</up-cell-group>
					</uni-section>
				</up-list-item>
			</up-list>
		</view>
		
	</view>
</template>

<script setup>
	import apply from '@/static/images/apply.png'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const indexList = ref([]);
	const urls = [
		'https://uview-plus.jiangruyi.com/album/1.jpg',
		'https://uview-plus.jiangruyi.com/album/2.jpg',
		'https://uview-plus.jiangruyi.com/album/3.jpg',
		'https://uview-plus.jiangruyi.com/album/4.jpg',
		'https://uview-plus.jiangruyi.com/album/5.jpg',
		'https://uview-plus.jiangruyi.com/album/6.jpg',
		'https://uview-plus.jiangruyi.com/album/7.jpg',
		'https://uview-plus.jiangruyi.com/album/8.jpg',
		'https://uview-plus.jiangruyi.com/album/9.jpg',
		'https://uview-plus.jiangruyi.com/album/10.jpg',
	];
	const groupStyle = ref({
		'background-color': '#fff'
	});
	
		onLoad(() => {
			loadmore();
		});

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {
		for (let i = 0; i < 30; i++) {
			indexList.value.push({
				url: urls[uni.$u.random(0, urls.length - 1)],
				id: i
			});
		}
	};
	
	function handleBack() {
		uni.navigateBack();
	}
	
	//  点击列表项
	function handleClickItem(item) {
		console.log(item);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/manager/establishment/toExamine/detail?id=' + item.id
		})

	}
</script>

<style lang="scss" scoped>
	.box-bg {
		:deep(.uni-navbar__header-btns, .uni-navbar__header-btns-right) {
			width: 200px !important;
		}
		.u-nav-slot {
			width: 300px;
			display: flex;

			.u-nav-text {
				font-size: 15px;
				color: #fff;
				position: relative;
				margin-right: 10px;

				
			}
		}
	}
	.car-list {
		padding: $uni-spacing-row-lg;

		&-item {

			&-row {


				display: flex;
				justify-content: space-between;
				color: #333;
				font-size: 15px;

				&-phone {
					font-size: 13px;
					color: #797E84;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					&-status1{
						color:#F69B1B;
					}
					&-status2{
						color:#3C88D8
					}
					&-status3{
						color: #DA3321;
					}
				}
			}


			&-content {
				flex: 1;
				margin-left: $uni-spacing-row-lg;

				&-title {
					font-size: 13px;
					color: #333;
					&-num{
						color: #3C88D8;
						margin-right: $uni-spacing-row-sm;
					}
				}

				&-desc {
					margin-top: $uni-spacing-row-lg ;
					font-size: 13px;
					color: #999;
				}

				&-tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: $uni-spacing-row-lg;
					font-size: 13px;
					color: #999;

					&-item {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #E8EBEE;
						border-radius: 15px;
					}
				}

				&-location {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #999;
					margin-top: $uni-spacing-row-sm;
				}


			}
		}
	}
	
</style>